{% extends 'layout/mange.html' %}

{% block media %}{{ form.media }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">添加项目</h3>
                </div>
                <div class="panel-body">
                    <form method="post" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                {% if field.name == 'star' %}
                                    <label for="{{ field.id_for_label }}" class="star-label">
                                        <i class="fa fa-star star-icon"></i>
                                        {{ field.label }}
                                    </label>
                                    {{ field }}
                                {% else %}
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                {% endif %}
                                <span style="color: red;">{{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}
                        <button type="submit" class="btn btn-primary" id="submitBtn">提交</button>

<script>
    document.getElementById('submitBtn').addEventListener('click', function(event) {
        // 阻止表单默认提交
        event.preventDefault();
        
        // 获取所有必填字段
        const requiredFields = document.querySelectorAll('input[required], textarea[required]');
        let isValid = true;
        
        // 检查每个必填字段
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                isValid = false;
                // 高亮显示未填写的字段
                field.style.borderColor = 'red';
                // 确保错误信息可见
                const errorSpan = field.nextElementSibling;
                if (errorSpan && errorSpan.style.color === 'red' && !errorSpan.textContent) {
                    errorSpan.textContent = '此字段为必填项';
                }
            } else {
                // 重置有效字段的样式
                field.style.borderColor = '';
                const errorSpan = field.nextElementSibling;
                if (errorSpan && errorSpan.style.color === 'red' && errorSpan.textContent === '此字段为必填项') {
                    errorSpan.textContent = '';
                }
            }
        });
        
        // 如果表单有效，则提交
        if (isValid) {
            this.closest('form').submit();
        }
    });

    // 实时清除错误提示
    document.querySelectorAll('input, textarea').forEach(field => {
        field.addEventListener('input', function() {
            if (this.value.trim()) {
                this.style.borderColor = '';
                const errorSpan = this.nextElementSibling;
                if (errorSpan && errorSpan.style.color === 'red' && errorSpan.textContent === '此字段为必填项') {
                    errorSpan.textContent = '';
                }
            }
        });
    });
</script>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}